{extend name='table'}

{block name="button"}
    <button class="layui-btn layui-btn-sm" data-modal='{:url("add")}' data-title="添加会员">
        <i class="layui-icon layui-icon-add-1"></i> 添加会员
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" data-table-id="MemberTable" data-action='{:url("remove")}' data-rule="id#{id}">
        <i class="layui-icon layui-icon-delete"></i> 删除会员
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" data-table-id="MemberTable" data-action='{:url("state")}' data-rule="id#{id};status#1">
        <i class="layui-icon layui-icon-ok-circle"></i> 启用
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-warm" data-table-id="MemberTable" data-action='{:url("state")}' data-rule="id#{id};status#0">
        <i class="layui-icon layui-icon-close-fill"></i> 禁用
    </button>
    <button class="layui-btn layui-btn-sm" style="background-color: #1E9FFF;" id="updateAllMembersBtn">
        <i class="layui-icon layui-icon-refresh"></i> 更新信息
    </button>
{/block}

{block name="search"}
    <form class="layui-form layui-form-pane form-search" id="MemberSearchForm" data-table-id="MemberTable" onsubmit="return false">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input name="name" value="{$get.name|default=''}" placeholder="请输入会员姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input name="phone" value="{$get.phone|default=''}" placeholder="请输入手机号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">卡号</label>
            <div class="layui-input-inline">
                <input name="card_no" value="{$get.card_no|default=''}" placeholder="请输入卡号后4位" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status">
                    <option value="">- 全部 -</option>
                    <option value="1" {if input('get.status') == '1'}selected{/if}>正常</option>
                    <option value="0" {if input('get.status') == '0'}selected{/if}>禁用</option>
                </select>
            </div>
        </div>
        {if $isMaster}
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">注册门店</label>
            <div class="layui-input-inline">
                <select name="register_store_id">
                    <option value="">- 全部 -</option>
                    {foreach $stores as $s}
                    <option value="{$s.id}" {if input('get.register_store_id') == $s.id}selected{/if}>{$s.name}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        {/if}
        <div class="layui-form-item layui-inline">
            <button class="layui-btn" type="submit"><i class="layui-icon layui-icon-search"></i> 搜 索</button>
            <button class="layui-btn layui-btn-primary" type="reset"><i class="layui-icon layui-icon-refresh-1"></i> 重 置</button>
        </div>
    </form>
{/block}

{block name="content"}
    <table id="MemberTable" data-url="{:sysuri('index')}" data-target-search="form.form-search"></table>
{/block}

{block name="script"}
<script>
layui.use(['jquery', 'layer'], function () {
    var $ = layui.$;
    var layer = layui.layer;

    let cols = [
        {type: 'checkbox'},
        {field: 'id', title: 'ID', width: 80, sort: true},
        {field: 'name', title: '姓名', width: 120},
        {field: 'phone', title: '手机号', width: 140},
        {field: 'card_no', title: '磁卡号', width: 160},
        {field: 'register_store_name', title: '注册门店', width: 140},
        {field: 'total_points', title: '总积分', width: 110, sort: true},
        {field: 'available_points', title: '可用积分', width: 110, sort: true},
        {field: 'status', title: '状态', templet: function(d){return d.status==1?'<span class="color-green">正常</span>':'<span class="color-red">禁用</span>'}, width: 90},
        {field: 'create_time', title: '注册时间', width: 170, sort: true},
        {toolbar: '#ToolbarTpl', title: '操作', minWidth: 140, fixed: 'right'}
    ];
    $('#MemberTable').layTable({
        even: true,
        height: 'full-200',
        cols: [cols],
        // 添加排序事件监听，用于调试
        done: function(res, curr, count) {
            console.log('表格加载完成，当前排序字段:', this.sort);
        }
    });

    // 更新所有会员信息按钮
    $('#updateAllMembersBtn').on('click', function() {
        layer.confirm('确定要更新所有会员的信息吗？', {
            title: '确认操作',
            btn: ['确定', '取消']
        }, function(index) {
            layer.close(index);

            // 显示加载层
            var loadIndex = layer.load(1, {shade: [0.3, '#000']});

            $.ajax({
                url: '{:url("updateCreateTime")}',
                type: 'POST',
                dataType: 'json',
                success: function(res) {
                    layer.close(loadIndex);
                    if (res.code === 1) {
                        layer.msg(res.info || '更新成功', {icon: 1});
                    } else {
                        layer.msg(res.info || '更新失败', {icon: 2});
                    }
                },
                error: function() {
                    layer.close(loadIndex);
                    layer.msg('请求失败，请重试', {icon: 2});
                }
            });
        });
    });
});
</script>

<script type="text/html" id="ToolbarTpl">
    <a class="layui-btn layui-btn-xs" data-title="编辑会员" data-modal='{:url("edit")}?id={{d.id}}'>编 辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" data-confirm="确定要删除该会员吗？" data-action='{:url("remove")}' data-value="id={{d.id}}">删 除</a>
</script>
{/block}
